<template>
    <div>
        <!-- 绝对定位处理 -->
        <v-overlay
            :value="this.$store.state.show"
            class="myOverlay"
            height="100%"
            light
            opacity="0.8"
        >
            <v-card class="mx-auto card" height="100%" width="">
                <v-img
                    :alt="image.text"
                    class="white--text align-end imageViewer"
                    download
                    lazySrc="/images/sunshine_GaussianBlur.jpg"
                    v-bind:src="imageUrl + image.path"
                >
                </v-img>
                <!--                <v-card-text>-->
                <!--                    <div align="left">#{{ image.date }}</div>-->
                <!--                    <p align="left" class="display-1 text&#45;&#45;primary"></p>-->
                <!--                    <a-->
                <!--                        :href="image.copyrightlink"-->
                <!--                        target="_blank"-->
                <!--                    >-->
                <!--                        <p align="left">-->
                <!--                            {{ image.text }}-->
                <!--                        </p>-->
                <!--                    </a>-->
                <!--                    <div align="left" class="text&#45;&#45;primary">-->
                <!--                        {{ image.copyright }}-->
                <!--                    </div>-->
                <!--                    <div style="padding:10px 0">-->
                <!--                        <v-btn-->
                <!--                            block-->
                <!--                            elevation="5"-->
                <!--                        >-->
                <!--                            <a-->
                <!--                                :href="baseUrl + image.path"-->
                <!--                                target="_blank"-->
                <!--                            >-->
                <!--                                Download-->
                <!--                            </a>-->
                <!--                        </v-btn>-->
                <!--                    </div>-->
                <!--                </v-card-text>-->
            </v-card>

            <!--            <p style="position:absolute;right: 5px;top: 5px">x</p>-->
            <div
                class="
                    fixed
                    right-5
                    top-3
                    rounded-full
                    flex
                    justify-end
                    bg-yellow-500
                "
            >
                <v-btn
                    class="white--text"
                    dark
                    download
                    icon
                    @click="downloadImg"
                >
                    <v-icon color="blue"> mdi-download </v-icon>
                </v-btn>
                <span class="height-full mt-1 mx-2">|</span>
                <v-btn
                    class="white--text hover:bg-yellow-700"
                    dark
                    icon
                    @click="hidden"
                >
                    <v-icon color="blue"> mdi-close </v-icon>
                </v-btn>
            </div>
        </v-overlay>
    </div>
</template>

<script>
export default {
    name: "TImageViewer",
    props: {},
    data: function () {
        return {
            baseUrl: this.$global.serverUrl,
            imageUrl: this.$global.imageUrl,
            image: this.$store.state.image,
            cHeight:
                (window.innerHeight || document.documentElement.clientHeight) *
                0.8,
            cWidth:
                (window.innerWidth || document.documentElement.clientWidth) *
                0.8,
            image_name: function () {
                let a = this.image.path.split("/");
                return a[a.length - 1];
            },
        };
    },
    mounted: function () {
        // console.log(this.baseUrl)
        // console.log(this.image.title)
    },
    watch: {
        "$store.state.image": function () {
            this.image = this.$store.state.image;
            // console.log("update state.image " + this.image.title)
        },
        // 'image': function () {
        //     let a = this.image.path.split('/')
        //     this.image_name = a[a.length - 1]
        // }
    },
    methods: {
        hidden() {
            this.$store.commit("originalHidden");
        },

        downloadImg() {
            console.log(123);
            const _this = this;
            const x = new XMLHttpRequest();
            x.open("GET", this.imageUrl + this.image.path, true);
            // x.setRequestHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with");
            // x.setRequestHeader("Access-Control-Allow-Methods", "GET");
            x.setRequestHeader("Origin", "bing2.imtzz.com");
            x.responseType = "blob";
            x.onload = function (e) {
                const url = window.URL.createObjectURL(x.response);
                const a = document.createElement("a");
                a.href = url;
                let namearray = _this.image.path.split("/");
                a.download = namearray[namearray.length - 1];
                a.click();
            };
            x.send();
        },
    },
};
</script>

<style scoped>
.v-overlay {
    /*height: 100%;*/
    /*width: 100%;*/
    /*display: inline !important;*/
}

/*v-img {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/

.close {
    position: fixed;
    right: 2%;
    top: 2%;
    background-color: #e5b135b5 !important;
}

.download {
    position: fixed;
    right: 5%;
    top: 2%;
    background-color: #e5b135b5 !important;
}

.card {
    height: 100% !important;
    width: 100% !important;
}

.imageViewer {
    height: 100%;
    width: 100%;
    /*background:url('imgUrl');*/
    background-size: cover;
    background-position: center;
}
</style>
